<template>
    <t-modal class="mL" ref="modal" title="选择报表" :width="400" :visible="visible" :destroyOnClose="true" @ok="ok"
        @cancel="cancel">
        <a-spin :spinning="loading">
            <a-form :form="form">
                <a-row>
                    <a-col :span="24">
                        <a-form-item label="报表" :labelCol="labelCol" :wrapperCol="wrapperCol">
                            <a-select style="width: 270px" palceholder="请选择报表"
                                v-decorator="['name', { rules: [{ required: true, message: '必填' }] }]">
                                <a-select-option :value="item" v-for="(item, index) in reportList.reportList.list"
                                    :key="index">
                                    {{ item | nameFilter }}
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </a-spin>
    </t-modal>
</template>
  
<script>
const fields = ['name']
export default {
    props: {
        visible: {
            type: Boolean,
            required: true,
        },
        reportList: {
            type: Object,
            default: () => { }
        }
    },
    filters: {
        nameFilter(val) {
            if (val) {
                return val.replace('.ureport.xml', '')
            }
            return val;
        },
    },
    data() {
        return {
            fields,
            labelCol: {
                xs: {
                    span: 24
                },
                sm: {
                    span: 5
                }
            },
            wrapperCol: {
                xs: {
                    span: 24
                },
                sm: {
                    span: 16
                }
            },
            form: this.$form.createForm(this),
            loading: false
        };
    },
    methods: {
        ok() {
            this.form.validateFields((errors, values) => {
                if(errors){
                    return
                }
                this.$emit('ok', this.form.getFieldsValue())
                this.$emit('update:visible', false);
                this.form.resetFields();

            })
        },
        cancel() {
            this.form.resetFields();
            this.$emit('update:visible', false)
        }

    },
    created() {
        // 防止表单未注册
        fields.forEach(v => this.form.getFieldDecorator(v))
    }
};
</script>
  
<style lang="scss" scoped>
.ant-form {
    height: auto;
    width: 100%;
}

/* .mL .ant-modal-footer {
          border: none !important;
      } */
</style>
  